<template>
  <div>
    <Layout class="app-frame" v-if="!loading" :siderCollapsed="siderCollapsed" siderFixed>
      <Sider theme="dark">
        <div class="app-menu">
          <div class="app-logo" style="background:white; height: 54px;">
            <router-link to="/">
              <span class="app-logo-icon" style="background: url(img/logo.png);margin-left:8px; width:45px;height:45px; background-size: 100% 100%;"></span>
              <span class="app-logo-text" style="color: #3788ee;">Easy Manager</span>
            </router-link>
          </div>
          <Menu :datas="user.menu" :inlineCollapsed="siderCollapsed" @select="menuSelect" ref='menu' className="h-menu-dark" accordion></Menu>
          <div class="app-menu-mask" @click="siderCollapsed=true"></div>
        </div>
      </Sider>
      <Layout headerFixed>
        <HHeader theme="white">
          <div class="app-header" style="display: flex;">
            <div style="width:50px;float:left;"><Button :icon="siderCollapsed ? 'icon-align-right':'icon-align-left'" size="l" noBorder class="font20" @click="siderCollapsed=!siderCollapsed"></Button></div>
            <!-- 顶部模块菜单 -->
            <div style="flex: 1" class="top-menu-pc">
              <Breadcrumb :datas="breadcrumb"></Breadcrumb>
            </div>

            <div class="float-right app-header-info" style="width: 200p">
              <DropdownMenu className="app-header-dropdown" trigger="hover" offset="0,5" :width="150" placement="bottom-end" :datas="userMenu" @onclick="userMenuClick">
                <span>{{user.username}}</span>
              </DropdownMenu>
            </div>
          </div>
        </HHeader>
        <Content>
          <div class="app-frame-content" style="height:100%">
            <!-- <keep-alive> -->
<!--            <transition name="fade">-->
              <router-view/>
<!--            </transition>-->
            <!-- </keep-alive> -->
          </div>
        </Content>
      </Layout>
    </Layout>
    <Modal v-model="changePwd"  middle hasDivider>
      <div slot="header">修改密码</div>
      <div v-width="300">
        <Form
            :labelWidth="110"
            ref="pwdForm"
            :rules="pwdRules"
            :model="pwds"
            class="title-suffix"
        >
          <FormItem label="旧密码" prop="OldPassword" required>
            <input type="password" v-model="pwds.OldPassword">
          </FormItem>
          <FormItem label="新密码"  prop="Password" required>
            <input type="password" v-model="pwds.Password">
          </FormItem>
          <FormItem label="重复新密" prop="ConfirmPassword" required>
            <input type="password" v-model="pwds.ConfirmPassword">
          </FormItem>
        </Form>
      </div>
      <div slot="footer"><Button  @click="updatePwd">确定</Button></div>
    </Modal>
  </div>
</template>
<script>
import {ajax} from  'framework'
import {mapState} from 'Vuex'
export default{
  name:"Admin",
  data(){
    return {
      changePwd:false,
      appName:'',
      userName:'',
      loading: false,
      siderCollapsed:false,
      currentTop:{},
      breadcrumb:[
        {
          title: '首页',
          route: { name: 'Home' }
        }
      ],
      userMenu: [
        { key: 'pwd', title: '修改密码', icon: 'h-icon-lock' },
        { key: 'logout', title: '退出登录', icon: 'h-icon-outbox' }
      ],
      pwds:{
        OldPassword:"",
        Password:"",
        ConfirmPassword:""
      },
      pwdRules:{
        rules:{
          Password: {
            maxLen: 18,
            minLen: 5
          }
        },
        combineRules:[{
          refs: ['Password', 'ConfirmPassword'],
          valid(a,b){
            if(a != b){
              return "两次输入密码必须相同";
            }
            return true;
          }
        }]
      }
    }
  },
  computed:{
    ...mapState(['user'])
  },
  watch:{
    $route(){
      this.initSelect()
    }
  },
  mounted(){
    this.initSelect()
  },
  methods:{
    initSelect(){
      let name=this.$route.name;
      if(name=="Index"){
        this.$router.push({name:'Home'})
        return
      }
      if (name) {

        this.$refs.menu.select(name);
        if(name!="Home"){
          this.breadcrumb.splice(1, this.breadcrumb.length-1,{title:this.$route.meta.title})
        }else{
          this.breadcrumb.splice(1, this.breadcrumb.length-1)
        }
      }

    },
    userMenuClick(data){
      if(data=="logout"){
        ajax.get('system/logout').then((r)=>{
          location.reload()
        })
      }else if(data=="pwd"){
        this.pwds={
          OldPassword:"",
          Password:"",
          ConfirmPassword:""
        }
        this.changePwd=true
      }
    },
    menuSelect(m){
      if(this.$route.name!=m.key){
        this.$router.push({name:m.key})
      }
    },
    updatePwd(){
      let validResult = this.$refs.pwdForm.valid();
      if (validResult.result) {
        ajax.post("system/changePassword",this.pwds).then(r=>{
          this.$Message("密码已经修改")
          if(r.code==200){
            this.changePwd=false
          }
        })
      }
    }
  }
}
</script>
